<template>
  <div>
    <el-card>
      <div slot='header'>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="publishForm" :rules="publishFormRules" ref="publishFormRef" label-width="100px">
        <el-form-item label=" 标题：" prop="title">
          <el-input v-model="publishForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label=" 内容：" prop="content">

          <el-tiptap placeholder="请输入内容" v-model="publishForm.content" :extensions="extensions" :charCounterCount="false" :height='300' lang='zh'></el-tiptap>
        </el-form-item>
        <el-form-item label="封面：" prop="type">
          <el-radio-group v-model="publishForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if='publishForm.cover.type>0'>
          <template>
            <update-cover v-model='publishForm.cover.images[index]' v-for='(item ,index) in publishForm.cover.type' :key="index" />
          </template> </el-form-item>
        <el-form-item label="  频道：" prop="channel_id">
          <el-select v-model="publishForm.channel_id" placeholder="请选择频道">
            <el-option :label="v.name" :value="v.id" v-for=" v in channelList " :key="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click='onPublish(false)' type="primary">发表</el-button>
          <el-button @click='onPublish(true)'>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import UpdateCover from './components/update-cover.vue'
import 'element-tiptap/lib/index.css'
import { getArticleChannels, uploadImage, addArticle, getArticleById } from '@/api/user.js'
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  Image
} from 'element-tiptap'
export default {
  components: {
    'el-tiptap': ElementTiptap,
    UpdateCover
  },
  data() {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
        new Italic(),
        new Image({
          uploadRequest(file) {
            const fd = new FormData()
            fd.append('image', file)
            return uploadImage(fd).then(res => {
              return res.data.data.url
            })
          }
        }),
        new Strike(),
        new ListItem(),
        new BulletList()
      ],
      publishForm: {
        channel_id: '',
        title: '',
        content: '',
        cover: {
          images: [],
          type: 0
        }
      },
      channelList: [],
      publishFormRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6到 20个字符', trigger: 'blur' }
        ],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        channel_id: [{ required: true, message: '请选择频道' }]
      },
      userid: ''
    }
  },
  created() {
    this.loadChannel()
    if (this.$route.query.id) {
      this.userid = this.$route.query.id.toString()
      this.loadGetArticle()
    }
  },
  methods: {
    loadChannel() {
      getArticleChannels().then(res => {
        this.channelList = res.data.data.channels
      })
    },
    onPublish(draft) {
      this.$refs.publishFormRef.validate(valid => {
        if (!valid) {
          return
        }
        addArticle(this.publishForm, draft)
          .then(() => {
            this.$message.success('发布成功！')
            this.$router.push('/article')
          })
          .catch(() => {
            this.$message.error('发布失败！')
          })
      })
    },
    loadGetArticle() {
      getArticleById(this.userid).then(res => {
        this.publishForm = res.data.data
      })
    }
  }
}
</script>

<style scoped>
.el-form-item__content > div {
  display: inline-block;
}
</style>
